<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>首页</title>
		<link rel="stylesheet" href="css/bootstrap.css">
		<link rel="stylesheet" href="css/style.css">
	</head>

	<body>
		<nav class="navbar bg-white navbar-expand-lg py-4">
			<div class="container-lg">
				<div class="d-lg-none">
				</div>
				<a href="index.html" class="navbar-brand px-3">
					<img src="images/logo2.png" width="170px" alt="">
				</a>				
				<button class="navbar-toggler shadow-none border-0 text-red" type="button" data-bs-toggle="offcanvas"
					data-bs-target="#nav">
					<svg width="24" height="24">
						<use href="images/icon.svg#three-dots-vertical" />
					</svg>
				</button>
				<div class="collapse navbar-collapse justify-content-evenly">
					<form action="" class="w-50">
						<div class="input-group">
							<input type="search" name="" id="" class="form-control rounded-0 border-red border-2">
							<button class="btn btn-red rounded-0">
								<svg width="24" height="24" class="bi bi-search">
									<use href="images/icon.svg#search" />
								</svg>
							</button>
						</div>
					</form>
					<a class="btn btn-red rounded-1" href="index.html">返回首页</a>
					<div>
						<a href="" class="text-decoration-none d-flex align-items-center mb-2">
							<span class="badge rounded-pill bg-red text-white p-2">
								<svg width="16" height="16" class="bi bi-person-lines-fill">
									<use href="images/icon.svg#center" />
								</svg>
							</span>
							<span class="text-red  ps-2">个人中心</span>
						</a>
						<a href="" class="text-decoration-none d-flex align-items-center" id="reg" data-bs-toggle="offcanvas"
							data-bs-target="#register">
							<span class="badge rounded-pill bg-red text-white p-2">
								<svg width="16" height="16" class="bi bi-journal-richtext">
									<use href="images/icon.svg#register" />
								</svg>
							</span>
							<span class="text-red  ps-2">注册</span>
						</a>
					</div>
				</div>
			</div>
		</nav>
		
		<!-- 侧导航开始 -->		
		<div class="offcanvas offcanvas-end bg-red text-white" tabindex="-1" id="nav">
			<div class="offcanvas-header border-bottom">
				<h5 class="offcanvas-title">一点通购物平台</h5>
				<button type="button" class="btn-close btn-close-white text-reset" data-bs-dismiss="offcanvas"></button>
			</div>
			<div class="offcanvas-body">
				<form action="" class="mb-3">
					<div class="input-group input-group-lg">
						<input type="search" name="" id="" class="form-control  border-2">
						<button class="btn btn-light">
							<svg width="24" height="24" class="bi bi-search">
								<use href="images/icon.svg#search" />
							</svg>
						</button>
					</div>
				</form>
				<button class="btn btn-red btn-lg mb-3">返回首页</button>
				<div class="mb-3">
					<a href="" class="text-decoration-none d-flex align-items-center mb-2">
						<span class="badge rounded-pill bg-light text-red p-2">
							<svg width="16" height="16" class="bi bi-person-lines-fill">
								<use href="images/icon.svg#center" />
							</svg>
						</span>
						<span class="text-white  ps-2">个人中心</span>
					</a>
					<a href="" class="text-decoration-none d-flex align-items-center" data-bs-toggle="offcanvas"
						data-bs-target="#register">
						<span class="badge rounded-pill bg-light text-red p-2">
							<svg width="16" height="16" class="bi bi-journal-richtext">
								<use href="images/icon.svg#register" />
							</svg>
						</span>
						<span class="text-white  ps-2">注册</span>
					</a>
				</div>
			</div>
		</div>
		<!-- 侧导航结束 -->
		<!-- 注册页面侧导航开始 -->
		<div class="offcanvas-end offcanvas text-red" id="register" data-bs-scroll="true" data-bs-backdrop="true"
			tabindex="-1">
			<div class="offcanvas-header">
				<h5 class="offcanvas-title">注册页面</h5>
				<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas"></button>
			</div>
			<div class="offcanvas-body ">
				<form action="">
					<div class="my-3">
						<label for="username1" class="form-label">Username</label>
						<input type="text" class="form-control border-2 border-red" name="" id="username1">
						<div class="form-text" id="result1">用户名必须大于2位</div>
					</div>
					<div class="my-3">
						<label for="email1" class="form-label">Email</label>
						<input type="email" class="form-control border-2 border-red" name="" id="email1">
						<div class="form-text" id="result2">密码必须包含数字和字符</div>
					</div>
					<div class="my-3">
						<label for="pwd1" class="form-label">Password</label>
						<input type="password" class="form-control border-2 border-red" name="" id="pwd1">
						<div class="form-text" id="result3">请输入密码</div>
					</div>
					<div class="my-3">
						<label for="pwd2" class="form-label">RePassword</label>
						<input type="password" class="form-control border-2 border-red" name="" id="pwd2">
						<div class="form-text" id="result4">再输入一遍密码</div>
					</div>

					<div class="my-3 text-center">
						<button type="submit" class="btn btn-red w-100">提交</button>
					</div>
				</form>
			</div>
		</div>
		<!-- 注册页面侧导航结束 -->
		<!-- 红色长条开始 -->
		<div class="w-100 py-2 bg-red">
		</div>
		<!-- 红色长条结束 -->

		<!-- 左侧导航+轮播开始 -->
		<div class="container-lg g-0 my-3">
			<div class="bg-secondary row g-0">
				<!-- 右拉框 -->
				<div class="col-3">
					<ul id="leftnav" class="bg-red d-flex flex-column justify-content-between m-0 p-0 position-relative">
						<!-- 左侧导航-手机开始 -->
						<li class="d-flex align-items-center  py-2">
							<div class="text-center text-white w-50 ">
								<svg width="60" height="60">
									<use xlink:href="images/icon.svg#phone" />
								</svg>
							</div>
							<div class="text-start w-50">
								<a href="" class="title text-white fs-5 text-decoration-none">手 机</a>
							</div>
							<!-- 更多手机品牌开始 -->
							<div class="c-item position-absolute py-2 px-5 start-100 top-0 bg-light shadow d-none">
								<div class="d-flex justify-content-between py-3">
									<a href="#">苹果</a>
									<a href="#">苹果iPhone XS Max</a>
									<a href="#">苹果iPhone XS</a>
									<a href="#">苹果iPhone X</a>
									<a href="#">更多 ></a>
								</div>
								<div class="d-flex justify-content-between py-3">
									<a href="#">小米</a>
									<a href="#">小米手机6</a>
									<a href="#">小米手机5</a>
									<a href="#">红米Note 4</a>
									<a href="">小米手机5S</a>
									<a href="">小米MiX</a>
									<a href="#">更多 ></a>
								</div>
								<div class="d-flex justify-content-between py-3">
									<a href="#">华为</a>
									<a href="#">华为 Mate9</a>
									<a href="#">华为 P9</a>
									<a href="#">华为 P10</a>
									<a href="#">华为 P10 Plus</a>
									<a href="#">华为 Mate8</a>
									<a href="#">更多 ></a>
								</div>
								<div class="d-flex justify-content-between py-3">
									<a href="#">荣耀</a>
									<a href="#">荣耀8</a>
									<a href="#">荣耀9</a>
									<a href="#">荣耀V9</a>
									<a href="#">荣耀8青春版</a>
									<a href="#">更多 ></a>
								</div>
								<div class="d-flex justify-content-between py-3">
									<a href="#">魅族</a>
									<a href="#">魅族 Note3</a>
									<a href="#">魅族 Note2</a>
									<a href="#">魅族 Note5</a>
									<a href="#">魅族 PRO6 Plus</a>
									<a href="#">更多 ></a>
								</div>
								<div class="d-flex justify-content-between py-3">
									<a href="#">三星</a>
									<a href="#">三星 Galaxy S7 edge</a>
									<a href="#">三星 Galaxy S8+</a>
									<a href="#">三星 Galaxy S</a>
									<a href="#">更多 ></a>
								</div>

								<div class="text-center">
									<a href="#" class="text-red fs-5">更多手机品牌</a>
								</div>
							</div>
							<!-- 更多手机品牌结束 -->
						</li>
						<!-- 左侧导航-手机结束 -->

						<!-- 左侧导航-平板开始 -->
						<li class="d-flex align-items-center  py-2">
							<div class="text-center text-white w-50">
								<svg width="60" height="60">
									<use xlink:href="images/icon.svg#pad" />
								</svg>
							</div>
							<div class="text-start w-50">
								<a href="" class="text-white fs-5 text-decoration-none">平 板</a>
							</div>
							<!-- 更多平板品牌开始 -->
							<div class="c-item position-absolute py-2 px-5 start-100 top-0 bg-light shadow d-none">
								<div class="d-flex justify-content-between py-3">
									<a href="#">苹果</a>
									<a href="#">苹果iPad Pro</a>
									<a href="#">苹果iPad mini5</a>
									<a href="#">苹果iPad 2021</a>
									<a href="#">更多 ></a>
								</div>
								<div class="d-flex justify-content-between py-3">
									<a href="#">小米</a>
									<a href="#">小米平板5</a>
									<a href="#">小米平板5 PRO</a>
									<a href="#">小米平板4</a>
									<a href="">小米平板4 PRO</a>
									<a href="#">更多 ></a>
								</div>
								<div class="d-flex justify-content-between py-3">
									<a href="#">华为</a>
									<a href="#">华为 MediaPad M2</a>
									<a href="#">华为 S8-701u</a>
									<a href="#">华为 T1-823L</a>
									<a href="#">华为畅想平板2</a>
									<a href="#">更多 ></a>
								</div>
								<div class="d-flex justify-content-between py-3">
									<a href="#">荣耀</a>
									<a href="#">荣耀S8-701W</a>
									<a href="#">荣耀T1-821W</a>
									<a href="#">荣耀平板2</a>
									<a href="#">荣耀平板V6</a>
									<a href="#">更多 ></a>
								</div>
								<div class="d-flex justify-content-between py-3">
									<a href="#">联想</a>
									<a href="#">联想 平板小新Pad</a>
									<a href="#">联想 平板小新Pad PRO</a>
									<a href="#">联想 平板M10 TB-X605</a>
									<a href="#">更多 ></a>
								</div>
								<div class="d-flex justify-content-between py-3">
									<a href="#">三星</a>
									<a href="#">三星 Knct1</a>
									<a href="#">三星 t210</a>
									<a href="#">三星 tab t710</a>
									<a href="#">更多 ></a>
								</div>

								<div class="text-center">
									<a href="#" class="text-red fs-5">更多平板品牌</a>
								</div>
							</div>
							<!-- 更多平板品牌结束 -->
						</li>
						<!-- 左侧导航-平板结束 -->

						<!-- 左侧导航-电脑开始 -->
						<li class="d-flex align-items-center  py-2">
							<div class="text-center text-white w-50">
								<svg width="60" height="60">
									<use xlink:href="images/icon.svg#computer" />
								</svg>
							</div>
							<div class="text-start w-50">
								<a href="" class="text-white fs-5 text-decoration-none">电 脑 </a>
							</div>
							<!-- 更多电脑品牌开始 -->
							<div class="c-item position-absolute py-2 px-5 start-100 top-0 bg-light shadow d-none">
								<div class="d-flex justify-content-between py-3">
									<a href="#">苹果</a>
									<a href="#">苹果MacBook PRo</a>
									<a href="#">苹果iMac</a>
									<a href="#">苹果MacBook Air</a>
									<a href="#">更多 ></a>
								</div>
								<div class="d-flex justify-content-between py-3">
									<a href="#">联想</a>
									<a href="#">ThinkPad R</a>
									<a href="#">ThinkPad SL</a>
									<a href="#">ThinkPad T</a>
									<a href="#">联想小新</a>
									<a href="#">更多 ></a>
								</div>
								<div class="d-flex justify-content-between py-3">
									<a href="#">华为</a>
									<a href="#">MateBook</a>
									<a href="#">MateBook D</a>
									<a href="#">MateBook E</a>
									<a href="#">MateBook X</a>
									<a href="#">更多 ></a>
								</div>
								<div class="d-flex justify-content-between py-3">
									<a href="#">外星人</a>
									<a href="#">M15 R6</a>
									<a href="#">X17 R1</a>
									<a href="#">X15 R1</a>
									<a href="#">更多 ></a>
								</div>
								<div class="d-flex justify-content-between py-3">
									<a href="#">小米</a>
									<a href="#">红米Book14</a>
									<a href="#">小米Pro</a>
									<a href="#">小米Ruby</a>
									<a href="#">更多 ></a>
								</div>
								<div class="d-flex justify-content-between py-3">
									<a href="#">三星</a>
									<a href="#">三星 950QCG</a>
									<a href="#">三星 930QCG</a>
									<a href="#">三星 300E5M</a>
									<a href="#">更多 ></a>
								</div>

								<div class="text-center">
									<a href="#" class="text-red fs-5">更多电脑品牌</a>
								</div>
							</div>
							<!-- 更多电脑品牌结束 -->
						</li>
						<!-- 左侧导航-电脑结束 -->

						<!-- 左侧导航-摄影摄像开始 -->
						<li class="d-flex align-items-center  py-2">
							<div class="text-center text-white w-50">
								<svg width="60" height="60">
									<use xlink:href="images/icon.svg#camera" />
								</svg>
							</div>
							<div class="text-start w-50">
								<a href="" class="text-white fs-5 text-decoration-none">摄影摄像 </a>
							</div>
							<!-- 更多相机品牌开始 -->
							<div class="c-item position-absolute py-2 px-5 start-100 top-0 bg-light shadow d-none">
								<div class="d-flex justify-content-between py-3">
									<a href="#">索尼</a>
									<a href="#">ZV-1 Vlog</a>
									<a href="#">A5100</a>
									<a href="#">A7M4</a>
									<a href="#">更多 ></a>
								</div>
								<div class="d-flex justify-content-between py-3">
									<a href="#">佳能</a>
									<a href="#">EOS R6</a>
									<a href="#">M50</a>
									<a href="#">EOS 850D</a>
									<a href="#">更多 ></a>
								</div>
								<div class="d-flex justify-content-between py-3">
									<a href="#">富士山</a>
									<a href="#">GFX 50S</a>
									<a href="#">X-S10</a>
									<a href="#">X-T4</a>
									<a href="#">GFX 100S</a>
									<a href="#">更多 ></a>
								</div>
								<div class="d-flex justify-content-between py-3">
									<a href="#">松下</a>
									<a href="#">G100K</a>
									<a href="#">S5K</a>
									<a href="#">LX10</a>
									<a href="#">S5</a>
									<a href="#">更多 ></a>
								</div>
								<div class="d-flex justify-content-between py-3">
									<a href="#">徕卡</a>
									<a href="#">徕卡Q2</a>
									<a href="#">徕卡M11</a>
									<a href="#">徕卡D-LUX7</a>
									<a href="#">更多 ></a>
								</div>
								<div class="d-flex justify-content-between py-3">
									<a href="#">尼康</a>
									<a href="#">D7500</a>
									<a href="#">D5300</a>
									<a href="#">P310</a>
									<a href="#">DF 50MM</a>
									<a href="#">更多 ></a>
								</div>

								<div class="text-center">
									<a href="#" class="text-red fs-5">更多相机品牌</a>
								</div>
							</div>
							<!-- 更多相机品牌结束 -->
						</li>
						<!-- 左侧导航-摄影摄像结束 -->

						<!-- 左侧导航-耳 机开始 -->
						<li class="d-flex align-items-center  py-2">
							<div class="text-center text-white w-50">
								<svg width="60" height="60">
									<use xlink:href="images/icon.svg#headset" />
								</svg>
							</div>
							<div class="text-start w-50">
								<a href="" class="text-white fs-5 text-decoration-none">耳 机 </a>
							</div>
							<!-- 更多耳机品牌开始 -->
							<div class="c-item position-absolute py-2 px-5 start-100 top-0 bg-light shadow d-none">
								<div class="d-flex justify-content-between py-3">
									<a href="#">苹果</a>
									<a href="#">airpods</a>
									<a href="#">airpods2</a>
									<a href="#">airpods PRO</a>
									<a href="#">更多 ></a>
								</div>
								<div class="d-flex justify-content-between py-3">
									<a href="#">小米</a>
									<a href="#">红米Buds3</a>
									<a href="#">红米AirDots3</a>
									<a href="#">小米Buds3</a>
									<a href="">红米AirDots3 PRO</a>
									<a href="#">更多 ></a>
								</div>
								<div class="d-flex justify-content-between py-3">
									<a href="#">华为</a>
									<a href="#">FreeBuds3</a>
									<a href="#">FreeBuds4</a>
									<a href="#">FreeBuds4i</a>
									<a href="#">FreeBuds PRO</a>
									<a href="#">更多 ></a>
								</div>
								<div class="d-flex justify-content-between py-3">
									<a href="#">VIVO</a>
									<a href="#">vivo TWS2</a>
									<a href="#">vivo TWS2E</a>
									<a href="#">vivo TWS Neo</a>
									<a href="#">更多 ></a>
								</div>
								<div class="d-flex justify-content-between py-3">
									<a href="#">OPPO</a>
									<a href="#">OPPO Enco Free2</a>
									<a href="#">OPPO Enco Air</a>
									<a href="#">OPPO Enco X</a>
									<a href="#">OPPO Enco W51</a>
									<a href="#">更多 ></a>
								</div>
								<div class="d-flex justify-content-between py-3">
									<a href="#">三星</a>
									<a href="#">三星 Galaxy Buds PRO</a>
									<a href="#">三星 Galaxy Buds2</a>
									<a href="#">三星 Galaxy Buds Live</a>
									<a href="#">更多 ></a>
								</div>

								<div class="text-center">
									<a href="#" class="text-red fs-5">更多耳机品牌</a>
								</div>
							</div>
							<!-- 更多耳机品牌结束 -->
						</li>
						<!-- 左侧导航-耳 机结束 -->

					</ul>
				</div>
				<!-- 图片滚动 -->
				<div class="col-9">
					<!-- 轮播开始 -->
					<div class=" carousel slide h-100" id="slide" data-bs-ride="carousel" data-bs-interval="3000">
						<!-- 轮播计数器开始 -->
						<div class="carousel-indicators">
							<button type="button" data-bs-target="#slide" data-bs-slide-to="0" class="active"></button>
							<button type="button" data-bs-target="#slide" data-bs-slide-to="1"></button>
							<button type="button" data-bs-target="#slide" data-bs-slide-to="2"></button>
							<button type="button" data-bs-target="#slide" data-bs-slide-to="3"></button>
						</div>
						<!-- 轮播计数器结束 -->

						<!-- 轮播项目开始 -->
						<div class="carousel-inner h-100">
							<div class=" carousel-item h-100 active">
								<img src="images/big4.png" class=" d-block w-100 h-100" alt="" >
							</div>
							<div class=" carousel-item h-100">
								<img src="images/big3.png" class=" d-block w-100 h-100" alt="">
							</div>
							<div class=" carousel-item h-100">
								<img src="images/big2.png" class=" d-block w-100 h-100" alt="">
							</div>
							<div class=" carousel-item h-100">
								<img src="images/big1.png" class=" d-block w-100 h-100" alt="">
							</div>
						</div>
						<!-- 轮播项目结束 -->

						<!-- 轮播控制器开始 -->
						<a href="#slide" class="carousel-control-prev" data-bs-slide="prev">
							<span class="carousel-control-prev-icon"></span>
						</a>
						<a href="#slide" class="carousel-control-next" data-bs-slide="next">
							<span class="carousel-control-next-icon"></span>
						</a>
						<!-- 轮播控制器结束 -->

						<!-- 轮播结束 -->
					</div>

				</div>

			</div>



		</div>
		<!-- 左侧导航+轮播结束 -->

		<!-- 商品列表选项卡开始 -->
		<!-- 标题开始 -->
		<div class="container-lg g-0 mt-5">
			<h5 class="text-red fw-bold mx-2">热门机型</h3>
		</div>
		<!-- 标题结束 -->
		
		<!-- 选项卡开始 -->
		<div class="container-lg g-0 shadow mt-3 productlist">
			<!-- 导航开始 -->
			<ul class="nav nav-pills nav-justified">
				<li class="nav-item "><a href="#phone" data-bs-toggle="pill" class="nav-link active rounded-0 py-3 fs-5">手机</a>
				</li>
				<li class="nav-item "><a href="#pad" data-bs-toggle="pill" class="nav-link rounded-0  py-3 fs-5">平板</a></li>
				<li class="nav-item"><a href="#computer" data-bs-toggle="pill" class="nav-link rounded-0  py-3 fs-5">电脑</a></li>
				<li class="nav-item "><a href="#camera" data-bs-toggle="pill" class="nav-link rounded-0  py-3 fs-5">相机</a></li>
				<li class="nav-item "><a href="#headset" data-bs-toggle="pill" class="nav-link rounded-0  py-3 fs-5">耳机</a></li>
			</ul>
			<!-- 导航结束 -->
			<!-- 导航面板开始 -->
			<div class="tab-content p-3">
				<div class="tab-pane fade show active my-3" id="phone" role="tabpanel">
					<div class="row gy-4">
						<div class="col-3 text-center">
							<a href="detail.html"> <img src="images/phone/iphone1.jpg" alt=""></a>
							<div class="my-2 text-muted"> iPhone X</div>
						</div>
						<div class="col-3 text-center">
							<a href=""> <img src="images/phone/iphone2.jpg" alt=""></a>
							<div class="my-2 text-muted"> iPhone 8 plus</div>
						</div>
						<div class="col-3 text-center">
							<a href=""> <img src="images/phone/iphone3.jpg" alt=""></a>
							<div class="my-2 text-muted"> iPhone 7</div>
						</div>
						<div class="col-3 text-center">
							<a href=""> <img src="images/phone/iphone4.jpg" alt=""></a>
							<div class="my-2 text-muted"> XiaoMi MAX3</div>
						</div>
						<div class="col-3 text-center">
							<a href=""> <img src="images/phone/iphone5.jpg" alt=""></a>
							<div class="my-2 text-muted"> honor-8X</div>
						</div>
						<div class="col-3 text-center">
							<a href=""> <img src="images/phone/iphone6.jpg" alt=""></a>
							<div class="my-2 text-muted"> honor-10</div>
						</div>
						<div class="col-3 text-center">
							<a href=""> <img src="images/phone/iphone7.jpg" alt=""></a>
							<div class="my-2 text-muted"> Galaxy Note8</div>
						</div>
						<div class="col-3 text-center">
							<a href=""> <img src="images/phone/iphone8.png" alt=""></a>
							<div class="my-2 text-muted"> nova 3i</div>
						</div>
					</div>
				</div>
				<div class="tab-pane fade  my-3" id="pad" role="tabpanel">
					<div class="row gy-4">
						<div class="col-3 text-center">
							<a href=""> <img src="images/pad/pad1.png" alt=""></a>
							<div class="my-2 text-muted"> Galaxy Tab A</div>
						</div>
						<div class="col-3 text-center">
							<a href=""> <img src="images/pad/pad2.png" alt=""></a>
							<div class="my-2 text-muted">Galaxy Tab S3</div>
						</div>
						<div class="col-3 text-center">
							<a href=""> <img src="images/pad/pad3.png" alt=""></a>
							<div class="my-2 text-muted"> Galaxy Tab S4</div>
						</div>
						<div class="col-3 text-center">
							<a href=""> <img src="images/pad/pad4.jpg" alt=""></a>
							<div class="my-2 text-muted"> honor-2</div>
						</div>
						<div class="col-3 text-center">
							<a href=""> <img src="images/pad/pad5.png" alt=""></a>
							<div class="my-2 text-muted"> huawei M5</div>
						</div>
						<div class="col-3 text-center">
							<a href=""> <img src="images/pad/pad6.jpg" alt=""></a>
							<div class="my-2 text-muted"> huawei M3</div>
						</div>
						<div class="col-3 text-center">
							<a href=""> <img src="images/pad/pad7.jpg" alt=""></a>
							<div class="my-2 text-muted"> iPad 9.7</div>
						</div>
						<div class="col-3 text-center">
							<a href=""> <img src="images/pad/pad8.jpg" alt=""></a>
							<div class="my-2 text-muted"> iPad pro</div>
						</div>
					</div>
				</div>
				<div class="tab-pane fade  my-3" id="computer" role="tabpanel">
					<div class="row gy-4">
						<div class="col-3 text-center">
							<a href=""> <img src="images/computer/computer1.jpg" alt=""></a>
							<div class="my-2 text-muted"> d-7000</div>
						</div>
						<div class="col-3 text-center">
							<a href=""> <img src="images/computer/computer2.jpg" alt=""></a>
							<div class="my-2 text-muted"> d-G3-15.6</div>
						</div>
						<div class="col-3 text-center">
							<a href=""> <img src="images/computer/computer3.jpg" alt=""></a>
							<div class="my-2 text-muted"> h-Pro454UF</div>
						</div>
						<div class="col-3 text-center">
							<a href=""> <img src="images/computer/computer4.jpg" alt=""></a>
							<div class="my-2 text-muted"> h-S2</div>
						</div>
						<div class="col-3 text-center">
							<a href=""> <img src="images/computer/computer5.png" alt=""></a>
							<div class="my-2 text-muted"> hp-15</div>
						</div>
						<div class="col-3 text-center">
							<a href=""> <img src="images/computer/computer6.png" alt=""></a>
							<div class="my-2 text-muted"> hp-ENVY</div>
						</div>
						<div class="col-3 text-center">
							<a href=""> <img src="images/computer/computer7.jpg" alt=""></a>
							<div class="my-2 text-muted"> lx-Air</div>
						</div>
						<div class="col-3 text-center">
							<a href=""> <img src="images/computer/computer8.png" alt=""></a>
							<div class="my-2 text-muted"> Macbook Air</div>
						</div>
					</div>
				</div>
				<div class="tab-pane fade  my-3" id="camera" role="tabpanel">
					<div class="row gy-4">
						<div class="col-3 text-center">
							<a href=""> <img src="images/camera/camera1.jpg" alt=""></a>
							<div class="my-2 text-muted"> b-K-70</div>
						</div>
						<div class="col-3 text-center">
							<a href=""> <img src="images/camera/camera2.png" alt=""></a>
							<div class="my-2 text-muted"> n-Z6</div>
						</div>
						<div class="col-3 text-center">
							<a href=""> <img src="images/camera/camera3.png" alt=""></a>
							<div class="my-2 text-muted"> j-EOS M6</div>
						</div>
						<div class="col-3 text-center">
							<a href=""> <img src="images/camera/camera4.png" alt=""></a>
							<div class="my-2 text-muted"> n-COOLPIX</div>
						</div>
						<div class="col-3 text-center">
							<a href=""> <img src="images/camera/camera5.png" alt=""></a>
							<div class="my-2 text-muted"> n-D750</div>
						</div>
						<div class="col-3 text-center">
							<a href=""> <img src="images/camera/camera6.png" alt=""></a>
							<div class="my-2 text-muted"> n-F6</div>
						</div>
						<div class="col-3 text-center">
							<a href=""> <img src="images/camera/camera7.png" alt=""></a>
							<div class="my-2 text-muted"> n-ILCE-7</div>
						</div>
						<div class="col-3 text-center">
							<a href=""> <img src="images/camera/camera8.png" alt=""></a>
							<div class="my-2 text-muted"> s-HDR-CX680</div>
						</div>
					</div>
				</div>
				<div class="tab-pane fade  my-3" id="headset" role="tabpanel">
					<div class="row gy-4">
						<div class="col-3 text-center">
							<a href=""> <img src="images/headset/headset1.jpg" alt=""></a>
							<div class="my-2 text-muted"> t- CK350M</div>
						</div>
						<div class="col-3 text-center">
							<a href=""> <img src="images/headset/headset2.png" alt=""></a>
							<div class="my-2 text-muted"> Beats EP</div>
						</div>
						<div class="col-3 text-center">
							<a href=""> <img src="images/headset/headset3.png" alt=""></a>
							<div class="my-2 text-muted"> Beats Solo3</div>
						</div>
						<div class="col-3 text-center">
							<a href=""> <img src="images/headset/headset4.png" alt=""></a>
							<div class="my-2 text-muted"> Bose SoundLink</div>
						</div>
						<div class="col-3 text-center">
							<a href=""> <img src="images/headset/headset5.png" alt=""></a>
							<div class="my-2 text-muted"> Bose SoundSport</div>
						</div>
						<div class="col-3 text-center">
							<a href=""> <img src="images/headset/headset6.png" alt=""></a>
							<div class="my-2 text-muted"> s-HD4.50</div>
						</div>
						<div class="col-3 text-center">
							<a href=""> <img src="images/headset/headset7.png" alt=""></a>
							<div class="my-2 text-muted"> s-IE-800</div>
						</div>
						<div class="col-3 text-center">
							<a href=""> <img src="images/headset/headset8.jpg" alt=""></a>
							<div class="my-2 text-muted"> t-EM7x</div>
						</div>
					</div>
				</div>

			</div>
			<!-- 导航面板结束 -->
		</div>
		<!-- 选项卡结束 -->
		<!-- 商品列表选项卡结束 -->

		<!-- 底部开始 -->
		<div class="container-lg my-5">
			<div class="row  d-none d-md-flex">
				<div class="col-3 d-flex align-items-center">
					<div class="w-50 pe-3 text-red">
						<svg class="w-100">
							<use xlink:href="images/icon.svg#time" />
						</svg>
					</div>
					<div class="w-50">
						<h5 class="text-dark-emphasis">准时快捷</h5>
						<p class="small text-muted">验货回收 快速方便</p>
					</div>
				</div>
				<div class="col-3 d-flex align-items-center">
					<div class="w-50 pe-3 text-red">
						<svg class="w-100">
							<use xlink:href="images/icon.svg#safe" />
						</svg>
					</div>
					<div class="w-50">
						<h5 class=" text-dark-emphasis"> 安全保障</h5>
						<p class="small text-muted "> 放心购买 全权保障</p>
					</div>
				</div>
				<div class="col-3 d-flex align-items-center">
					<div class="w-50 pe-3 text-red">
						<svg class="w-100">
							<use xlink:href="images/icon.svg#environment" />
						</svg>

					</div>
					<div class="w-50">
						<h5 class="text-dark-emphasis"> 环保处理</h5>
						<p class="small text-muted "> 综合利用 拒绝污染</p>
					</div>
				</div>
				<div class="col-3 d-flex align-items-center">
					<div class="w-50 pe-3 text-red">
						<svg class="w-100">
							<use xlink:href="images/icon.svg#service" />
						</svg>
					</div>
					<div class="w-50 ">
						<h5 class="text-dark-emphasis "> 售后无忧</h5>
						<p class="small text-muted">7天内无理由退货</p>
					</div>
				</div>
			</div>

			<div class="row d-md-none text-center">
				<div class="col">
					<svg class="w-100 text-red">
						<use xlink:href="images/icon.svg#time" />
					</svg>
					<h6 class="text-dark-emphasis">准时快捷</h6>
				</div>
				<div class="col  text-red">
					<svg class="w-100">
						<use xlink:href="images/icon.svg#safe" />
					</svg>
					<h6 class=" text-dark-emphasis"> 安全保障</h6>
				</div>
				<div class="col  text-red">
					<svg class="w-100">
						<use xlink:href="images/icon.svg#environment" />
					</svg>
					<h6 class="text-dark-emphasis"> 环保处理</h6>
				</div>
				<div class="col  text-red">
					<svg class="w-100">
						<use xlink:href="images/icon.svg#service" />
					</svg>
					<h6 class="text-dark-emphasis "> 售后无忧</h6>
				</div>
			</div>
			<div class="my-5 text-center small text-muted ">
				Copyright &copy; 2021-2025 ZJFF 版权所有
			</div>
		</div>
		<!-- 底部结束 -->
		<script src="js/popper.min.js "></script>
		<script src="js/bootstrap.js "></script>
		<script>
			var reg = document.getElementById("reg");
		</script>
	</body>

</html>